<template>
  <div class="header van-hairline--bottom" v-show="!showHeader">
    <van-icon @click="goBack" v-if="!hidden" name="arrow-left" />
    <i v-else>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</i>
    <div class="header-title">{{title || navTitle}}</div>
    <van-icon name="back-top" @click="backTop" />
  </div>
  <div class="block" v-show="route.path !== '/home'" />
</template>

<script setup>
import {ref, watch} from 'vue'
import {useRoute, useRouter} from 'vue-router'
import {generateTabbar, filterTabbar} from '@/utils/route'
import {hasScrollbar} from '@/utils/utils'

const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  background: {
    type: String,
    default: '#f9f9f9'
  }
})

const route = useRoute()
const router = useRouter()

const hidden = ref(false)
const showHeader = ref(false)
const navTitle = ref('新蜂商城')
const bg = ref(props.background)
const backTwoStep = ['/order']

function goBack() {
  console.log(route)
  if (backTwoStep.includes(route.path)) {
    router.go(-2)
    return
  }
  router.go(-1)
}
function backTop() {
  if (!hasScrollbar()) return
  window.scrollTo(0, 0)
}

watch(
  () => route,
  newRoute => {
    const {path, meta} = newRoute
    const hidelist = ['/home', '/categray', '/shoplist']
    const whitelist = filterTabbar(generateTabbar(router.getRoutes()))
    navTitle.value = meta.title
    if (whitelist.includes(path)) {
      hidden.value = true
    } else {
      hidden.value = false
    }
    if (hidelist.includes(path)) showHeader.value = true
    else showHeader.value = false
  },
  {
    immediate: true,
    deep: true
  }
)
</script>

<style lang="less" scoped>
@import '@/assets/style/mixin.less';

.header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  .fj();
  .wh(100%, 44px);
  line-height: 44px;
  padding: 0 10px;
  .boxSizing();
  color: #252525;
  background: v-bind(bg);
  display: flex;
  text-align: center;
  align-items: center;
  .header-title {
    font-size: 14px;
    color: #333;
    font-weight: bold;
    width: 130px;
    .ellipsis();
  }
}
.block {
  height: 44px;
}
</style>
